<template>
  <div class="user-auth">
    <a-card :body-style="{ padding: '32px' }" :bordered="false">
      <div class="auth-title">
        <div class="title">项目信用申请 - 1.材料准备</div>
        <div class="desc">
          请提前准备好如下相关电子文件档，如不了解，请联系客服电话：{{
            config.p_phone
          }}
        </div>
      </div>
      <div class="auth-content">
        <a-steps :current="0">
          <a-step
            v-for="item in [
              '材料准备',
              '材料信息上传',
              '基本信息填写',
              '完成待审核',
              '后台审核',
              '项目信用申请成功'
            ]"
            :key="item"
            :title="item"
          />
        </a-steps>

        <div class="documents-wrapper">
          <div class="document-item">1. 项目中标合同</div>
          <div class="document-item">2. 项目招投标文件</div>
          <div class="document-item">3. 中标通知书</div>
          <div class="document-item">4. 项目施工许可证</div>
          <div class="document-item">5. 项目规划许可证</div>
          <div class="document-item">6. 建筑施工安全生产许可证</div>
          <div class="document-item">7. 企业信用报告</div>
          <div class="document-item">
            8. 项目经理、技术负责人和施工管理负责人签字样式确认以及承诺书
          </div>
          <div class="document-item">9. 施工企业授权委托书</div>
          <div class="document-item">
            10. 项目唯一指定结算账户确认书以及承诺函
          </div>
          <div class="document-item">11. 控股股东或实控连带担保承诺函</div>
          <div class="document-item">
            <a :href="'https://admin.xmzhuchen.com/' + config.p_project_zip"
              >8-11项目打包下载</a
            >
          </div>
        </div>

        <div class="next-wrapper">
          <a-button
            htmlType="submit"
            type="primary"
            size="large"
            @click="$router.push('/project/apply/step2')"
          >
            准备好了下一步
          </a-button>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

const MODEL = {
  class: 3,
  domain: 3,
  name: "",
  addr: "",
  contact: "",
  phone: "",
  wechat: "",
  card_num: "",
  qualifications: [],
  dy_pics: []
};

export default {
  data() {
    return {
      model: { ...MODEL },
      disabled: false,
      radioValue: "1"
    };
  },
  watch: {
    radioValue() {
      setTimeout(() => {
        window.IS_EDIT = false;
      }, 100);
    }
  },
  computed: {
    ...mapGetters(["account"]),
    rules() {
      return {
        name: [
          {
            title: "抖音号",
            required: true,
            message: "请输入抖音号",
            trigger: "blur"
          }
        ],
        phone: [
          {
            title: "联系人手机号",
            required: true,
            message: "请输入手机号，商务会及时联系您",
            trigger: "blur"
          }
        ],
        wechat: [
          {
            title: "联系人微信号",
            required: true,
            message: "请输入微信号，商务会及时联系您",
            trigger: "blur"
          }
        ],
        qualifications: [
          {
            title: "抖音个人信息页",
            required: true,
            type: "array",
            trigger: "submit",
            message: "请上传个人信息截图"
          }
        ],
        dy_pics: [
          {
            title: "抖音创服中心截图",
            required: true,
            type: "array",
            trigger: "submit",
            message: "请上传抖音创服中心截图"
          }
        ],
        contact: [
          {
            title: "联系人姓名",
            required: true,
            message: "请输入联系人姓名，商务会及时联系您",
            trigger: "blur"
          }
        ]
      };
    }
  },
  methods: {
    onSubmit(e) {
      e.preventDefault();
      this.$refs.form.validate(async valid => {
        if (valid) {
          window.IS_EDIT = false;
          this.$router.push("/auth/success");
        }
      });
    },
    prev() {
      if (this.disabled) {
        this.$message.info("您已经选择了认证类型哦，不可更改");
      } else {
        this.$router.replace("/auth/home");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.user-auth {
  .auth-title {
    padding-left: 30px;
    margin-bottom: 30px;

    .title {
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid @border-color;
      color: @primary-color;
      padding-bottom: 4px;
    }

    .desc {
      padding-top: 8px;
      font-size: 16px;
      color: @text-color-2;
    }
  }

  .auth-content {
    padding: 10px 20px;
    margin: 0 auto;

    .documents-wrapper {
      margin: 40px 0 0;

      .document-item {
        font-size: 16px;
        width: 600px;
        margin: 0 0 16px 450px;
        text-align: left;

        a {
          text-decoration: underline;
        }
      }
    }

    .next-wrapper {
      width: 240px;
      margin: 30px auto 12px;
      text-align: left;
    }
  }
}
</style>
